<template>
    <div class="flex-body">
        <!-- 头部 -->
        <!-- <Header></Header> -->
        <!-- 提示 -->
        <!-- <div v-show="isShowTipMessage" class="tipMessage" style="position:fixed;z-index:10;left:0;right:0;top:0;bottom:0;margin:auto;letter-spacing:4px;width:400px;height:50px;font-size:24px;display:flex;justify-content:center;align-items:center;color:white;background:#0e90d2;">
          网站建设中······
        </div> -->
        <!-- 提示 -->
        <div v-show="isShowTipMessage" class="tipMessage" style="position:fixed;left:50%;margin-left:-130px;top:50%;transform:translateY(-30%);z-index:10;">
          <img src="@/static/images/jiansz.png" alt="">
        </div>
        <div v-show="isShowTipMessage" @click="hideTipMessage" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:9;background:#000;opacity:0.3;"></div>
        
        <div class="header" style="height:205px"></div>
        <div class="main-bg" style="min-height:calc(100vh - 245px);box-sizing:border-box;">
            <div
                class="es1210 body-stick-min-height"
                style="margin-top: 30px; height:auto;"
            >
                <!-- 引导提示 -->
                <div class="am-g es-result" v-if="isShowTip">
                   <div class="es-result-l am-fl" style="width: 100%;padding-bottom: 0;">
                       <section class="am-panel box-shad" style="position:relative;minHeight:650px;margin-bottom:5px;overflow:hidden">
                          <header
                                class="am-panel-hd"
                                style="padding-top: 30px;padding-bottom: 30px;position: relative;"
                            >
                                <h3
                                    class="am-panel-title am-text-primary am-text-center"
                                    style="color:#303133;font-size: 26px;position:relative;z-index:2;"
                                >{{subjectName}}—{{categoryName}}</h3>
                            </header>
                            <div class="tip" style="position:absolute;z-index:2;right:400px;top:350px;">
                              <h3 style="font-size:26px;color:#006699;font-family:Microsoft YaHei;font-weight:400;">正在玩命建设中，请耐心等待哦...</h3>
                              <div style="color:#666666;font-size:16px;text-align:center;">请点击右上角的<span style="color:#006699">【切换】</span>继续浏览</div>
                            </div>
                          <img src="../../static/images/center_guide.png" alt="" style="position:absolute;z-index:1;top:20px;right:20px;">
                       </section>
                    </div>
                </div>
                <div class="am-g es-result" v-if="!isShowTip" style="position:relative;overflow:hidden;">
                    <div class="es-result-l am-fl" style="width: 100%;padding-bottom: 0;">
                        <!-- 学习板块开始 -->
                        <section class="am-panel box-shad" style="minHeight:600px;margin-bottom:5px;padding-bottom: 10px;">
                            <!-- 免费答疑-->
                              <!-- <template v-if="isShowMentoring">
                                <span style="position:absolute;top:120px;left:560px;z-index:10;font-size:22px;font-weight:bold;">免费答疑</span>
                                <img src="../../static/images/qrcode.png" alt="" srcset="" @click="tapShowMentoring" style="position:absolute;z-index:10; width:230px;height:230px;left:498px;top:239px;">
                                <img src="../../static/images/dayi.png" alt="" srcset="" @click="tapShowMentoring" style="position:absolute;z-index:9;top:120px;">
                                <span style="position:absolute;top:488px;left:482px;z-index:10;font-size:22px;font-weight:400;color:#555;">扫码加入微信免费答疑社群</span>
                              </template> -->
                              <template v-if="isShowMentoring">
                                <img  @click="tapShowMentoring" style="position:fixed;z-index:10;left:50%;margin-left:-330px;top:50%;transform:translateY(-40%);width:700px;height:400px;" src="../../static/images/mianfeidayi.png" alt="">
                              </template>
                              <div v-show="isShowMentoring" @click="tapShowMentoring" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:8;background:#111;opacity:0.3;"></div>
                            <!-- 免费答疑end -->
                             <!-- 资料领取 -->
                              <template v-if="isShowDatum">
                                <img  @click="tapShowDatum" style="position:fixed;z-index:10;left:50%;margin-left:-330px;top:50%;transform:translateY(-40%);width:700px;height:400px;" src="../../static/images/ziliaolingqu.png" alt="">
                              </template>
                              <div v-show="isShowDatum" @click="tapShowDatum" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:8;background:#111;opacity:0.3;"></div>
                            <!-- 资料领取end -->
                            
                            <header
                                class="am-panel-hd"
                                style="padding-top: 30px;padding-bottom: 30px;position: relative;"
                            >
                                <h3
                                    class="am-panel-title am-text-primary am-text-center"
                                    style="color:#303133;font-size: 26px;"
                                >{{subjectName}}—{{categoryName}}</h3>
                            </header>
                            <div class="am-panel-bd stucen-list am-padding-top-0" style='padding-bottom:0;'>
                                <ul class="am-avg-sm-3 couse-list font15">
                                   <li
                                        class="am-animation-scale-up"
                                        style="border-right: dashed 1px #E4E7ED;border-bottom: dashed 1px #E4E7ED"
                                        @click="goExamList('practice')"
                                    >
                                        <a
                                          class="am-block for-guest"
                                          data-href="/practice215"
                                          target="_blank"
                                          style="cursor: pointer;"
                                          data-content="试用版内容和功能有限，开通课程课后畅快体验！"
                                        >
                                            <div class="am-center">
                                                <div class="stucen-md-l">
                                                    <img
                                                        src="../../static/images/mnks.png"
                                                        alt=""
                                                    >
                                                </div>
                                                <div class="stucen-md-r">
                                                    <h2>
                                                        模拟考试
                                                    </h2>
                                                    <p>仿真模拟考试，自动倒计时、自动评分，让你身临其境。</p>
                                                </div>
                                                <div style="clear:both;"></div>
                                            </div>
                                        </a>
                                    </li> 
                                    <li
                                        class="am-animation-scale-up"
                                        style="border-right: dashed 1px #E4E7ED;border-bottom: dashed 1px #E4E7ED"
                                    >
                                        <a
                                            class="am-block for-guest"
                                            href="javascript:void(0);"
                                            style="cursor: pointer;"
                                            @click="goExamList('zhenti')"
                                        >
                                            <div class="am-center">
                                                <div class="stucen-md-l">
                                                    <img
                                                        src="../../static/images/lnzt.png"
                                                        alt=""
                                                    >
                                                </div>
                                                <div class="stucen-md-r">
                                                    <h2>
                                                        历年真题
                                                        
                                                    </h2>
                                                    <p>历年真题，实时练习，掌握每个知识点。</p>
                                                </div>
                                                <div style="clear:both;"></div>
                                            </div>
                                        </a>
                                    </li>
                                    
                                    <li
                                        class="am-animation-scale-up"
                                        style="border-bottom: dashed 1px #E4E7ED"
                                        @click="goMyCollect('error')"
                                    >
                                        <a href="javascript:void(0);" class="unusable">
                                            <div class="am-center">
                                                <div class="stucen-md-l">
                                                    <img
                                                        src="../../static/images/ctqh.png"
                                                        alt=""
                                                    >
                                                </div>
                                                <div class="stucen-md-r">
                                                    <h2>错题强化</h2>
                                                    <p>自动收藏考试错题，找到薄弱环节、错题重做、反复强化。</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <ul class="am-avg-sm-3 couse-list font15">
                                    <li
                                        class="am-animation-scale-up"
                                        style="border-right: dashed 1px #E4E7ED;border-bottom: dashed 1px #E4E7ED"
                                        @click="goMyCollect('collect')"
                                    >
                                        <a href="javascript:void(0);" class="unusable">
                                            <div class="am-center">
                                                <div class="stucen-md-l">
                                                    <img
                                                        src="../../static/images/wdsc.png"
                                                        alt=""
                                                    >
                                                </div>
                                                <div class="stucen-md-r">
                                                    <h2>我的收藏</h2>
                                                    <p>经典题目永久收藏，温故而知新。</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                    <li
                                        class="am-animation-scale-up"
                                        style="border-right: dashed 1px #E4E7ED;border-bottom: dashed 1px #E4E7ED"
                                        @click="tapShowMentoring"
                                    >
                                        <a
                                            href="javascript:void(0);"
                                            class="unusable"
                                            data-content="该功能不支持免费试用"
                                        >
                                            <div class="stucen-md-l">
                                                <img src="../../static/images/wddy.png" alt="">
                                            </div>
                                            <div class="stucen-md-r">
                                                <h2>免费答疑</h2>
                                                <p>名师在线答疑，为你的考试学习保驾护航。</p>
                                            </div>
                                        </a>
                                    </li>
                                     <li
                                        class="am-animation-scale-up"
                                        style="border-bottom: dashed 1px #E4E7ED;border-bottom: dashed 1px #E4E7ED"
                                        @click="tapShowDatum"
                                    >
                                        <a
                                            href="javascript:void(0);"
                                            class="unusable"
                                            data-content="该功能不支持免费试用"
                                        >
                                            <div class="stucen-md-l">
                                                <img src="../../static/images/zllq.png" alt="">
                                            </div>
                                            <div class="stucen-md-r">
                                                <h2>资料领取</h2>
                                                <p>考前冲刺学习资料包免费领取</p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <ul class="am-avg-sm-3 couse-list font15">
                                    <li
                                        class="am-animation-scale-up"
                                        style="border-right: dashed 1px #E4E7ED;"
                                    >
                                        <a
                                            target="_blank"
                                            class="for-guest"
                                            style="cursor: pointer;"
                                            
                                             @click="goExamList('chapter')"
                                        >
                                        <!-- @click="goExamList('chapter')" @click='tipCommingsoon'-->
                                            <div class="stucen-md-l">
                                                <img src="../../static/images/zjlx.png" alt="">
                                            </div>
                                            <div class="stucen-md-r">
                                                <h2>
                                                    章节练习
                                                    <!-- <span class="am-text-danger">(免费试用)</span> -->
                                                </h2>
                                                <p>同步教材章节练习实时更新，反复练习每个考点，让你熟能生巧。</p>
                                            </div>
                                        </a>
                                    </li>
                                    <li
                                        class="am-animation-scale-up"
                                        style="border-right: dashed 1px #E4E7ED;"
                                    >
                                        <a href="javascript:void(0);" class="unusable"
                                          @click='goMyProgress'
                                         >
                                            <div class="stucen-md-l">
                                                <img src="../../static/images/zrjd.png" alt="">
                                            </div>
                                            <div class="stucen-md-r">
                                                <h2>载入进度</h2>
                                                <p>继续上次的做题进度。继续上次的做题进度。继续上次的做题进度。继续上次的做题进度。继续上次的做题进度。</p>
                                            </div>
                                        </a>
                                    </li>
                                    <!-- <li
                                        class="am-animation-scale-up"
                                        style="border-right: dashed 1px #E4E7ED;border-bottom: dashed 1px #E4E7ED"
                                    >
                                        <a href="javascript:void(0);" style="cursor:pointer;" @click="tipCommingsoon">
                                            <div class="am-center">
                                                <div class="stucen-md-l">
                                                    <img
                                                        src="../../static/images/kqmj.png"
                                                        alt=""
                                                    >
                                                </div>
                                                <div class="stucen-md-r">
                                                    <h2>
                                                        考前密卷 （
                                                        <span class="am-text-warning">VIP专享</span>）
                                                    </h2>
                                                    <p>过关必刷，考前押题，定向攻克，逐级提分，专项演练，快速通关</p>
                                                </div>
                                            </div>
                                        </a>
                                    </li> -->
                                    <!-- <li
                                        class="am-animation-scale-up"
                                        style="border-bottom: dashed 1px #E4E7ED"
                                    >
                                        <a
                                            class="am-block for-guest"
                                            href="javascript:void(0);"
                                            style="cursor: pointer;"
                                            @click="goExamList('practice')"
                                             
                                        >
                                            <div class="am-center">
                                                <div class="stucen-md-l">
                                                    <img
                                                        src="../../static/images/lnzt.png"
                                                        alt=""
                                                    >
                                                </div>
                                                <div class="stucen-md-r">
                                                    <h2>
                                                        历年真题
                                                        <span class="am-text-danger">(免费试用)</span>
                                                    </h2>
                                                    <p>历年真题，实时练习，掌握每个知识点。</p>
                                                </div>
                                                <div style="clear:both;"></div>
                                            </div>
                                        </a>
                                    </li> -->
                                </ul>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <!-- <Footer></Footer> -->
    </div>
</template>
<script>
import Header from "../../components/common/header.vue";
import Footer from "../../components/common/footer.vue";
import eventBus from '../../utils/eventBus.js'
export default {
  components: {
    Header,
    Footer,
  },
  data(){
    return {
      isShowMentoring:false,//是否显示答疑
      isShowDatum:false,
      isShowTip:false,
      subjectName:'注册会计师',
      categoryName:'会计',
      isShowTipMessage:false,//建设中提示
    }
  },
  mounted(){
    this.getHeaderMessage()
    eventBus.$on('requestList',()=>{
      this.getHeaderMessage()
    })
  },
  methods: {
    tapShowMentoring(){//免费答疑
      this.isShowMentoring = !this.isShowMentoring;
    },
    tapShowDatum(){//资料领取
      this.isShowDatum = !this.isShowDatum;
    },
    getHeaderMessage(){
      // if(localStorage.getItem('subjectName')!='注册会计师'){
      //   this.isShowTip=true;
      // }else{
      //    this.isShowTip=false;
      // }
      if(localStorage.getItem('categoryName')){
        this.categoryName = localStorage.getItem('categoryName')
      }
      if(localStorage.getItem('subjectName')){
        this.subjectName = localStorage.getItem('subjectName')
      }
    },
    tipCommingsoon(){
      if(!this.isShowTipMessage){
        this.isShowTipMessage = true;
        this.timer = setTimeout(() => {
          this.isShowTipMessage = false;
          clearTimeout(this.isShowTipMessage)
        }, 1500);
      }
    },
    hideTipMessage(){
      this.isShowTipMessage = false;
    },
    goMyCollect(type){//跳转收藏
      let path = ''
      if(type == 'error'){
        path = '/errorTestList'
      }else{
        path = '/chapter'
      }
      let routerUrl = this.$router.resolve({
        path:path,query:{page:type}
      })
      window.open(routerUrl.href, '_blank');
    },
    goMyProgress(){//跳转到载入进入
      let routerUrl = this.$router.resolve({
        path:'/studyCenter/progressList'
      })
      window.open(routerUrl.href, '_blank');
    },
    closeAssessment(){//能力评估弹窗关闭
      this.isShowAssessment = false;
    },
    goExamList(name){
      let routerUrl = this.$router.resolve({
        path:"/studyCenter/" + name,
        params:{
          name:name
        }
      })
      window.open(routerUrl.href, '_blank');
    },
    // goMockExam() {
    //   this.$router.push("/studyCenter/proctive");
    // },
    // goChapter(){
    //   this.$router.push("/studyCenter/chapter");
    // },
  }
};
</script>
<style lang="scss" scoped>
/* 公用样式 */

li {
  list-style: none;
}

.box-shad {
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
}

body {
  background: #f4f4f4;
}

.flex-body {
  display: -ms-flexbox;
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  min-height: 100%;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
}

.border-right {
  border-right: 1px solid #ddd;
}

/* 中间框架内容 */

.main-bg {
  /*background-color: #f4f4f4;*/
  background-image: url(../../static/images/fanggebeijing.png);
  background-size: auto;
  min-width: 1210px;
  position: relative;
  width: 100%;
  top: 0;
  bottom: 0px;
  overflow-y: auto;
  flex: 1 1 auto;
  -webkit-box-flex: 1 1 auto;
  -moz-box-flex: 1 1 auto;
  -webkit-flex: 1 0 auto;
  -ms-flex: 1 1 auto;
  padding: 0;
  min-height: auto;
  overflow: visible;
  height: auto;
}

.es1210 {
  width: 1210px;
  margin: 0px auto;
  height: 100%;
}

.es-result-l {
  width: 980px;
  margin-left: 10px;
  height: 100%;
}

.usr-side-nav {
  padding-top: 5px;
  padding-bottom: 0px;
  margin-bottom: 5px;
}

.usr-side-nav li {
  border-bottom: 1px solid #ddd;
}

.usr-side-nav li a {
  padding: 20px;
  display: block;
}

.usr-side-nav li:last-of-type {
  border-bottom: none;
}

.usr-side-nav li i {
  margin-right: 5px;
}

.ret-top {
  background: url(../../static/images/elevator.png) no-repeat;
  width: 52px;
  height: 52px;
  background-position: 0 -674px;
  cursor: pointer;
  position: fixed;
  bottom: 50px;
  right: 100px;
}

.ret-top:hover {
  background-position: 0 -736px;
}

.couse-list li {
  padding: 20px 10px;
  overflow: hidden;
}

.couse-list li p {
  margin: 8px 0px 3px;
  width: 100%;
  height: 25px;
  overflow: hidden;
}

.couse-list li p a {
  padding: 0.2em 0.5em;
  margin-bottom: 3px;
  margin-right: 5px;
}

.couse-list li p.marg-t-3 {
  margin-top: 3px;
}

.cour-list-img {
  border: 1px solid #ddd;
  overflow: hidden;
  position: relative;
}

.cour-list-tag {
  position: absolute;
  right: 0px;
  top: 0px;
  padding: 3px 5px;
}

/*通用*/

.page-title {
  font-size: 20px;
  height: 60px;
  line-height: 100px;
}

.small_nav {
  font-size: 14px;
  color: #999;
  padding: 10px 0;
  font-weight: normal;
}

.es-result-r {
  width: 220px;
  /*padding:40px 10px;*/
}

li.selects {
  border-left: 3px solid #0e90d2;
  color: #0e90d2;
}

li.selects a {
  color: #0e90d2;
  padding-left: 30px;
}

li.selects a:hover {
  color: #0e90d2;
}

/* 学习中心页面新增 */

.stucen-navtit {
  padding-left: 20px;
  padding-top: 20px;
  margin-bottom: -15px;
}

.stucen-md-l {
  float: left;
  width: 100px;
  height: 150px;
  overflow: hidden;
  padding: 3px 0px 0px 15px;
}

.stucen-md-l img {
  margin-top:10px;
  width: 60px;
  height: 60px;
}

.stucen-list ul li {
  /*padding: 50px 8px 0 10px;*/
  padding: 25px 8px 0 10px;
}

.stucen-md-r {
  float: left;
  width: 260px;
  height: 140px;
  overflow: hidden;
}

.stucen-md-r h2 {
  border: none;
  padding: 0px;
  margin-bottom: 10px;
  color: #303133;
  font-weight: normal;
}

.couse-list .stucen-md-r p {
  height: 50px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #909399;
}

.zb_lesson_list {
  position: relative;
  padding-top: 0px;
  margin-top: 15px;
  height: 270px;
  overflow: hidden;
  border: none;
}

.zb_lesson_list li {
  position: absolute;
  padding: 6px 0px;
}

.zb_lesson_list {
  width: 258px;
  padding: 15px 20px;
  float: left;
  margin: 0px;
}

.zb_lesson_list li {
  width: 214px;
  float: right;
  line-height: 22px;
  border-left: 1px solid #e8e8e8;
}

.zb_lesson_list li .zb_line1 {
  width: 198px;
  float: right;
  color: #999;
  font-size: 14px;
  position: relative;
}

.zb_lesson_list li .zb_line1 em {
  width: 22px;
  height: 22px;
  position: absolute;
  left: -25px;
  top: 4px;
  background: url(../../static/images/images.png) no-repeat -808px -48px;
}

.zb_lesson_list li .zb_line2 {
  width: 198px;
  float: right;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.zb_lesson_list li .zb_line2 a {
  color: #666;
  font-size: 14px;
}

.zb_lesson_list li .zb_line3 {
  width: 198px;
  float: right;
  color: #999;
  font-size: 14px;
  height: 1px;
  background: #f5f5f5;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* 考试精编页面新增 */

.exam-nav {
  position: relative;
}

.exam-nav li {
  border-bottom: 1px solid #ddd;
}

.exam-nav li:last-of-type {
  border-bottom: none;
}

.exam-nav-list:hover {
  border-left: 3px solid #0e90d2;
}

.exam-nav-list:hover .exam-nav-list-i {
  display: block;
}

.exam-nav-list:hover .exam-nav-list-o a.am-block {
  width: 245px;
  background-color: #fff;
  position: absolute;
  z-index: 2;
  padding-top: 2px;
}

.exam-nav-list:hover .exam-nav-list-o span {
  display: none;
}

.exam-nav-list-o {
  height: 50px;
  line-height: 48px;
}

.exam-nav-list-i {
  width: 300px;
  position: absolute;
  left: 255px;
  top: -2px;
  border: 1px solid #ddd;
  background-color: #fff;
  padding: 5px 10px;
  min-height: 373px;
  display: none;
  text-align: center;
}

.exam-nav-list-i dl {
  margin: 0px;
}

.exam-nav-list-i dt {
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

.exam-nav-list-i dl:last-of-type dt {
  border-bottom: none;
}

/* 选课中心页面新增 */

.xk-category span {
  font-size: 14px;
  font-weight: bold;
}

.xk-category a {
  font-size: 14px;
  padding: 3px 8px;
  color: #666;
  margin-right: 10px;
  cursor: pointer;
}

.xk-category a.xk-select {
  background-color: #0e90d2;
  color: #fff;
}

.xk-tab-btn {
  border-bottom: 3px solid #0e90d2;
  background-color: #f5f5f5;
}

.xk-tab-btn li {
  float: left;
  padding: 7px 20px;
  cursor: pointer;
}

.xk-tab-btn li.xk-tab-select {
  background-color: #0e90d2;
  color: #fff;
}

.xk-tb-cont th,
.xk-tb-cont td {
  text-align: center;
}

.cy-prov-l {
  font-size: 14px;
  font-weight: bold;
  line-height: 25px;
}

.cy-prov-r {
  width: 800px;
}

.cy-prov-r a {
  font-size: 14px;
  padding: 3px 8px;
  color: #666;
  margin-right: 10px;
  cursor: pointer;
  margin-bottom: 7px;
  display: inline-block;
}

.cy-prov-r a.xk-select {
  background-color: #0e90d2;
  color: #fff;
}

.cy-prov-r a:hover {
  background-color: #0e90d2;
  color: #fff;
}

.xk-news {
  position: relative;
  margin: 20px 20px 0px;
  border: 1px solid #ddd;
  width: 1179px;
  background: url("http://hmwx.wdexam.com/Public/Home/img/sel-out-bg.png");
}

.xk-news-cont {
  height: 0px;
  width: 720px;
  margin: 70px auto 0 auto;
  height: 146px;
  overflow: hidden;
}

.close-news {
  position: absolute;
  right: 15px;
  top: 13px;
}

/* 单独定义样式 */

.font15 {
  font-size: 15px;
}

.bgwh {
  background-color: #fff;
}

/*考试精编详细页面新增*/

.detail-intro {
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  line-height: 30px;
  text-indent: 25px;
}

.detail-tit {
  border-left: 6px solid #008200;
}

.detail-text {
  text-indent: 25px;
  line-height: 30px;
}


/*1217新增*/

html,
body {
  height: 100%;
}

/*2017-01-07新增 消息提醒 样式*/

.emptyCourse {
  background: url("../../static/images/zwsj.png") no-repeat center center;
  text-align: center;
  width: 400px;
  height: 400px;
  padding-top: 280px;
  margin: 50px auto;
  font-size: 16px;
}

.newMessage {
  position: relative;
  cursor: pointer;
}



/*2017-01-09新增消息提醒第一版样式*/

.msgNum {
  width: 60px;
  height: 30px;
  /*line-height: 35px;*/
  position: absolute;
  left: 50%;
  margin-left: -40px;
  bottom: -45px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  cursor: pointer;
  z-index: 1;
}

.unread {
  background: #f37b1d;
  color: #fff;
}

.read {
  background: #999;
  color: #fff;
}

.msgCont {
  position: absolute;
  z-index: 9999;
  background: #fff;
  top: 95px;
  width: 952px;
  margin-left: 129px;
  /*width: 1178px;*/
  /*margin-left: 10px;*/
}

.arrowUp {
  width: 74px;
  margin: 0 auto;
  /*height: 16px;*/
  cursor: pointer;
}

/*2017-01-11新增消息提醒第二版样式*/

.msgbox {
  position: absolute;
  background-color: #fff;
  color: #333;
  top: 95px;
  width: 350px;
  left: 135px;
  height: 490px;
  cursor: default;
  border: 1px solid #b8bcc4;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 9999;
}

.listTab {
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  font-size: 14px;
}

.listTab li:first-child {
  border-right: 1px solid #f0f0f0;
}

.listTab li {
  width: 50%;
  display: inline-block;
  text-align: center;
}

.listTab li:hover {
  background-color: #ececec;
}

.listTab li.select a {
  color: #448aff;
}

.listTab li a {
  width: 100%;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  color: #666;
}

.mailList {
  height: 399px;
  overflow-x: hidden;
  overflow-y: auto;
}

.listItem {
  padding: 18px 20px 3px;
  padding-left: 40px;
  cursor: pointer;
}

.sender-avatar {
  width: 34px;
  height: 34px;
  border-radius: 17px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

.msg-detail {
  margin: 0 0 0 54px;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px dashed #ddd;
}

.msg-detail a {
  color: #8c8c8c;
}

.msg-detail a:hover {
  color: #ff7200;
}

.msg-detail em {
  background-color: #a0a0a0;
  display: inline-block;
  font-style: italic;
  height: 5px;
  left: 0;
  line-height: 0;
  margin: 13px 10px 2px;
  margin-left: -15px;
  position: absolute;
  text-align: center;
  top: 15px;
  width: 5px;
}

.msg-detail .bg-red {
  background-color: red;
}

.count_noread_all {
  -moz-border-bottom-colors: none;
  -moz-border-left-colors: none;
  -moz-border-right-colors: none;
  -moz-border-top-colors: none;
  border-color: #ff7800 #ff7800 #ff7800 -moz-use-text-color;
  border-image: none;
  border-style: solid solid solid solid;
  border-width: 1px 1px 1px 1px;
  color: #ff7800;
  padding: 0 5px 1px 0;
}

.msgInfo {
  height: 40px;
  overflow: hidden;
}

.msgDeal {
  padding: 15px 20px;
  border-top: 1px solid #f0f0f0;
}

.msgDeal li {
  width: 49%;
  display: inline-block;
}

.no-tip {
  height: 174px;
  margin-top: 100px;
  color: #8c8c8c;
}

.mask {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  position: absolute;
  top: 110px;
  z-index: 999;
  bottom: 50px;
}

/*2017-01-11新增 我的笔记页面 样式*/

.noteList li {
  border-bottom: 1px solid #ddd;
  background: url("../../static/images/mynote1.png") no-repeat 8px 2px;
  background-size: 30px 30px;
  margin-bottom: 20px;
  padding: 5px 10px 0 50px;
}

.noteList li:last-of-type {
  border-bottom: none;
  padding-bottom: 1px;
}

.noteList li:hover {
  cursor: pointer;
}

.noteList li.select {
  box-shadow: 0 0 3px 2px rgba(243, 123, 29, 0.3);
}

.noteList li p {
  line-height: 25px;
  height: 50px;
  overflow: hidden;
}

.noteList li a {
  display: inline-block;
  color: #666;
  margin-left: 5px;
}

/*2017-01-20 我的统计页面新增*/

.count-box {
  min-height: 500px;
}

.count-box .title {
  border-left: 3px solid #f60;
  border-bottom: 1px solid #ddd;
}


/*模板15的样式（四项全能）*/
.tp15-body-img {
  position: relative;
  width: 1210px;
  height: 700px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  background: url("../../static/images/chengjieye.png") no-repeat center #f9f9f7;
}

.tp15-parent {
  float: left;
  width: 400px;
  height: 100%;
}

.tp15-step {
  float: left;
  width: 205px;
  height: 110px;
  margin: 190px 0px 0px 93px;
  cursor: pointer;
}

.tp15-download {
  float: left;
  width: 205px;
  height: 110px;
  margin: 98px 0px 0px 93px;
}

.tp15-download .download {
  float: left;
  width: 55px;
  height: 20px;
  margin: 82px 0px 0px 43px;
  border-radius: 4px;
  cursor: pointer;
}

.tp15-download .watch {
  float: left;
  width: 55px;
  height: 20px;
  margin: 82px 0px 0px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.tp15-invoice1 {
  float: left;
  width: 240px;
  height: 165px;
  margin: 138px 0px 0px 12px;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
}

.tp15-invoice2 {
  float: left;
  width: 78px;
  height: 65px;
  margin: 120px 0px 0px -35px;
  border-radius: 10px;
  cursor: pointer;
}

.tp15-certificate1 {
  float: left;
  width: 240px;
  height: 165px;
  margin: 102px 0px 0px 12px;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
}

.tp15-certificate2 {
  float: left;
  width: 78px;
  height: 65px;
  margin: 83px 0px 0px -35px;
  border-radius: 10px;
  cursor: pointer;
}

.tp15-stateTax1 {
  float: left;
  width: 240px;
  height: 165px;
  margin: 50px 0px 0px 30px;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
}

.tp15-stateTax2 {
  float: left;
  width: 78px;
  height: 65px;
  margin: 30px 0px 0px -40px;
  border-radius: 10px;
  cursor: pointer;
}

.tp15-localTax1 {
  float: left;
  width: 240px;
  height: 165px;
  margin: 134px 0px 0px 34px;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
}

.tp15-localTax2 {
  float: left;
  width: 78px;
  height: 65px;
  margin: 97px 0px 0px -40px;
  border-radius: 10px;
  cursor: pointer;
}

.tp15-personalTax1 {
  float: left;
  width: 240px;
  height: 165px;
  margin: 106px 0px 0px 35px;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
  cursor: pointer;
}

.tp15-personalTax2 {
  float: left;
  width: 78px;
  height: 65px;
  margin: 90px 0px 0px -40px;
  border-radius: 10px;
  cursor: pointer;
}

#video-parent p {
  margin: 0px;
  font-size: 15px;
  text-indent: 2em;
  line-height: 200%;
  color: #333333;
}

.am-pagination a {
  cursor: pointer;
}

/*单科模版的样式*/
.tp16-body-img {
  position: relative;
  width: 1200px;
  height: 1000px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  background: url("../../static/images/cj-dishui.png") no-repeat center #f9f9f7;
}

.tp-step {
  float: left;
  display: inline-block;
  width: 146px;
  height: 35px;
  margin: 359px 0px 0px 289px;
  border-radius: 5px;
  cursor: pointer;
}

.tp-step:hover {
  box-shadow: 0px 0px 10px #3285d7;
}

.tp-download {
  float: left;
  height: 35px;
  width: 200px;
  margin: 611px 0px 0px 310px;
}

.tp-download .download-1 {
  float: left;
  height: 35px;
  width: 87px;
  margin-left: 8px;
  border-radius: 5px;
}

.tp-download .download-1:hover {
  box-shadow: 0px 0px 10px #04a0ad;
}

.tp-download .watch-1 {
  float: left;
  height: 35px;
  width: 87px;
  margin-left: 10px;
  border-radius: 5px;
  cursor: pointer;
}

.tp-download .watch-1:hover {
  box-shadow: 0px 0px 10px #04a0ad;
}

.watch_content {
  padding: 20px 0px;
}

.watch_content p {
  margin: 0px 20px;
  line-height: 30px;
  letter-spacing: 1px;
}

.watch_content .title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  margin: 5px 0px;
}

.watch_content hr {
  margin: 0px 50px;
  width: 800px;
  border-top: solid 1px #999;
}

.watch_content img {
  margin: 5px 20px;
}

.bold {
  font-weight: bold;
}

.red {
  color: #ff0000;
}

.tp-enter {
  float: left;
  width: 146px;
  height: 35px;
  margin: 225px 0px 0px 337px;
  border-radius: 5px;
  cursor: pointer;
}

.tp-enter:hover {
  box-shadow: 0px 0px 10px #f78d37;
}

/*模版17的样式*/
.tp17-body-img {
  position: relative;
  width: 1200px;
  height: 1000px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  background: url("../../static/images/cj-guoshui.png") no-repeat center #f9f9f7;
}

/*模版18的样式*/
.tp18-body-img {
  position: relative;
  width: 1200px;
  height: 1000px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  background: url("../../static/images/cj-geshui.png") no-repeat center #f9f9f7;
}

/*模版19的样式*/
.tp19-body-img {
  position: relative;
  width: 1200px;
  height: 1000px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  background: url("../../static/images/cj-kaipiao.png") no-repeat center #f9f9f7;
}

/*模版20的样式*/
.tp20-body-img {
  position: relative;
  width: 1200px;
  height: 1000px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  background: url("../../static/images/cj-renzheng.png") no-repeat center
    #f9f9f7;
}
/*tp33样式*/
.tp33-body-img {
  position: relative;
  width: 1210px;
  height: 700px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  background: url("../../static/images/chengjieye180823.jpg") no-repeat center
    #f9f9f7;
}
.tp33-step {
  float: left;
  width: 245px;
  height: 132px;
  margin: 295px 0px 0px 57px;
  cursor: pointer;
}
</style>
